<template>
  <van-cell center title="❤️️心动模式❤️">
    <template #right-icon>
      <van-switch v-model="isMatchMode"/>
    </template>
  </van-cell>
  <van-pull-refresh v-model="isLoadingDog" :head-height="80" @refresh="loadData">
    <!-- 下拉提示，通过 scale 实现一个缩放效果 -->
    <template #pulling="props">
      <img
          class="doge"
          src="https://yz-minded.oss-cn-chengdu.aliyuncs.com/loadingDog.jpg"
          :style="{ transform: `scale(${props.distance / 80})` }"
          alt="图片加载失败"
      />
    </template>
    <!--    释放提示-->
    <template #loosing>
      <img
          class="doge"
          src="https://yz-minded.oss-cn-chengdu.aliyuncs.com/loadingDog.jpg"
          alt="图片加载失败"
      />
    </template>
    <!-- 加载提示 -->
    <template #loading>
      <img
          class="doge"
          src="https://yz-minded.oss-cn-chengdu.aliyuncs.com/loadingDog.jpg"
          alt="加载图片失败"
      />
    </template>
    <div>
      <!-- 用户卡片列表 -->
      <user-card-list :user-list="userListPage" :loading="loading"/>
      <!-- 分页 -->
      <van-divider />
      <van-pagination
          v-model="currentPage"
          :total-items="totalItem"
          show-page-size="3"
          :items-per-page="itemsPerPage"
          force-ellipses
      />
    </div>
    <van-empty v-if="!userList || userList.length < 1" description="数据为空" />
  </van-pull-refresh>

</template>

<script setup lang="ts">
import {ref, watchEffect} from 'vue';
import {useRoute} from "vue-router";
import myAxios from '../plugins/myAxios.ts';
import UserCardList from "../components/UserCardList.vue";
import {showFailToast} from "vant";
import {useRouter} from "vue-router";

const router = useRouter();

const route = useRoute(); // 获取查询参数

const userList = ref([]); // 用户集合

const isMatchMode = ref<boolean>(false); // 是否心动模式

const {tags} = route.query;

const loading = ref(true); // 骨架屏加载效果

const currentPage = ref(1); // 当前页码
const totalItem = ref(8); // 总记录数量
const itemsPerPage = ref(8); // 每页展示的记录数

const userListPage = ref();

const isLoadingDog = ref(false);  // 下拉刷新图标

// 组件加载完成后查找标签符合的用户
const loadData = async () => {
  loading.value = true;
  isLoadingDog.value = true;
//  const checkLogin = getCurrentUser();
  if (isMatchMode.value) { // 心动模式
    const num = 8; // 匹配15个用户
    const userListData = await myAxios.get('/user/match', {
      params: {
        num,
        pageSize: itemsPerPage.value,
        pageNum: currentPage.value,
      },
    });
    if (userListData?.data?.records) {
      userListData.data.records.forEach(user => {
        if (user.tags) {
          user.tags = JSON.parse(user.tags); // 解析后端返回的json字符串为js数组
        }
      });
      userList.value = userListData.data;
      userListPage.value = userListData.data?.records;
      totalItem.value = userListData.data.total;
      itemsPerPage.value = userListData.data.size;
      currentPage.value = userListData.data.current;
    } else {
      showFailToast('暂无与你匹配的伙伴');
      isMatchMode.value = false;
    }
  } else {  // 普通模式
    const response = await myAxios.get('/user/recommend', {
      params: {
        pageNum:currentPage.value,
        pageSize:itemsPerPage.value
      },
    });
    if (response.data?.records) {
      response.data?.records.forEach(user => {
        if (user.tags) {
          user.tags = JSON.parse(user.tags); // 解析后端返回的json字符串
        }
      });
      userList.value = response.data;
      userListPage.value = response.data?.records;
      totalItem.value = response.data.total;
    } else {
      showFailToast("请求失败")
      await router.push('/user/login');
    }
    loading.value = false;
  }
  loading.value = false;
  isLoadingDog.value = false;
  window.scrollTo({top: 0})
};

// 监控变量变化触发方法
watchEffect(() => {
  loadData()
})
</script>

<style scoped>

</style>